<template>
  <div class="tree">
    <!-- @mousedown.stop="move" -->
    <div class="tree-content">
      <tree-item :tree-data="treeData" :tree-first="true" />
    </div>
  </div>
</template>

<script>
import TreeItem from "./components/TreeItem";
export default {
  name: "Tree",
  components: {
    TreeItem,
  },
  data() {
    return {
      treeData: [
        {
          name: "1",
          child: [
            {
              children: [
                {
                  salesName: "VFU抖一抖店-抖音",
                  name: "销售金额",
                  value: 80438.5,
                  yoy: null,
                  yoySign: null,
                  chain: 9.338978903871249,
                  chainSign: true,
                  dataDetail: "销售金额",
                  children: null,
                },
                {
                  salesName: "VFU-抖音小店",
                  name: "销售金额",
                  value: 145427.95,
                  yoy: null,
                  yoySign: null,
                  chain: 56.118139609779675,
                  chainSign: true,
                  dataDetail: "销售金额",
                  children: null,
                },
                {
                  salesName: "VFU-京东",
                  name: "销售金额",
                  value: 145427.95,
                  yoy: null,
                  yoySign: null,
                  chain: 56.118139609779675,
                  chainSign: true,
                  dataDetail: "销售金额",
                  children: null,
                },
              ],
              child: [
                {
                  name: "1",
                  child: [
                    {
                      children: [
                        {
                          salesName: "VFU抖一抖店-抖音",
                          name: "销售金额",
                          value: 80438.5,
                          yoy: null,
                          yoySign: null,
                          chain: 9.338978903871249,
                          chainSign: true,
                          dataDetail: "销售金额",
                          children: null,
                        },
                        {
                          salesName: "VFU-抖音小店",
                          name: "销售金额",
                          value: 145427.95,
                          yoy: null,
                          yoySign: null,
                          chain: 56.118139609779675,
                          chainSign: true,
                          dataDetail: "销售金额",
                          children: null,
                        },
                        {
                          salesName: "VFU-京东",
                          name: "销售金额",
                          value: 145427.95,
                          yoy: null,
                          yoySign: null,
                          chain: 56.118139609779675,
                          chainSign: true,
                          dataDetail: "销售金额",
                          children: null,
                        },
                      ],
                    },
                    { name: "4" },
                  ],
                },
                { name: "2" },
              ],
            },
            { name: "1", child: [{ name: "1" }, { name: "2" }] },
          ],
        },
      ],
    };
  },
  methods: {
    // 拖拽移动
    move(e) {
      const odiv = e.currentTarget; // 获取元素
      console.log(odiv);

      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft;
      const disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        const left = e.clientX - disX;
        const top = e.clientY - disY;

        // 绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        // 移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.tree {
  background: #fff;
  min-height: calc(100vh - 110px);
  position: relative;
  width: 100%; /* 容器宽度 */
  overflow-x: auto; /* 横向滚动条 */
  white-space: nowrap; /* 防止内容换行 */
  &-content {
    background: #fff;
    position: absolute;
    top: 0;
    left: 20%;
    width: 2000px; /* 设置一个足够大的宽度以产生横向滚动 */
    // margin: auto 0;
  }
}
</style>
八大基础数据类型：
逻辑类型：Boolean，
整数类型：byte,int,long,short,
浮点类型：float，double，
字符类型:chart
<!-- 浮点型：float，double
字符串：String，
整形：int interger long  -->
